.bttv-chat-direction-reversed {
  .chat-list .chat-scrollable-area__message-container[data-test-selector='chat-scrollable-area__message-container'],
  .chat-list--default
    .chat-scrollable-area__message-container[data-test-selector='chat-scrollable-area__message-container'],
  .chat-list--other
    .chat-scrollable-area__message-container[data-test-selector='chat-scrollable-area__message-container'] {
    display: flex;
    flex-direction: column-reverse;
  }

  /* 
    Vods don't use the normal chat component but a static UL which
    lists the chat messages. Therefore it requires different handling
  */
  .video-chat__message-list-wrapper > div,
  .video-chat__message-list-wrapper > div > ul {
    flex-direction: column-reverse !important;
    justify-content: flex-end !important;
  }

  .video-chat__message-list-wrapper > div > ul {
    flex-wrap: nowrap !important;
  }
}
